<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="card-container">
      <el-row type="flex">
        <el-col :span="20">
          <el-card style="width: 100%;margin-bottom: 10px">
            <el-form ref="elformIn" :model="formIn" size="mini" label-width="150px" label-position="left"
              :rules="rules">
              <el-row type="flex">
                <el-col :span="6">
                  <el-form-item prop="contType">
                    <el-select v-model="formCont.contType" placeholder="箱類型">
                      <el-option v-for="item in optionsContType" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="contVolume">
                    <el-select v-model="formCont.contVolume" placeholder="箱體積">
                      <el-option v-for="item in optionsContVolume" :key="item.value" :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item prop="num">
                    <el-input-number v-model="formCont.num" controls-position="right" :min="1">
                    </el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-folder-checked" size="mini" @click="requestContOut">
                      请求空箱出库
                    </el-button>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>

          </el-card>
          <el-row type="flex">
            <el-col :span="20">
              <el-card style="width: 100%;margin-top: 0px;">
                <el-form ref="elformIn" :model="formIn" size="mini" label-width="150px" label-position="left"
                  :rules="rules">
                  <el-form-item label="物料入库登记:" style="font-size: 16px;font-weight: 700;"> </el-form-item>
                  <el-row type="flex">
                    <el-col :span="11">
                      <el-form-item>
                        <el-radio-group v-model="radioZone">
                          <el-radio label="1" border size="medium">小庫-綫邊庫</el-radio>
                          <el-radio label="2" border size="medium">大庫-原料庫</el-radio>
                        </el-radio-group>
                      </el-form-item>
                      <el-form-item prop="contNo" label="箱号" label-width="100px">
                        <el-input ref="contInput" v-model="formIn.contNo" :style="{ width: '90%' }"
                          @keyup.enter.native="contLocateAsk">
                        </el-input>
                      </el-form-item>
                      <el-form-item prop="contLocateNo" label="货格号" label-width="100px">
                        <el-input v-model="formIn.contLocateNo" disabled :style="{ width: '90%' }">
                        </el-input>
                      </el-form-item>
                      <el-form-item prop="reelId1" label="ReelID" label-width="100px">
                        <el-input ref="reelInput" v-model="formIn.reelId1" :style="{ width: '90%' }"
                          @keyup.enter.native="reelIdAsk">
                        </el-input>
                      </el-form-item>

                      <el-form-item prop="inType" label="入库类型" label-width="100px">
                        <el-select v-model="formIn.inType" placeholder="请选择" :style="{ width: '90%' }">
                          <el-option v-for="item in optionsInType" :key="item.value" :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>

                      <el-row type="flex">
                        <el-col :span="7">
                          <el-form-item prop="itemLength" label="長cm" label-width="100px">
                            <el-input @input="formIn.itemLength = formIn.itemLength.replace(/[^\d|\.]/g, '')"
                              v-model="formIn.itemLength" :style="{ width: '90%' }">
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="7">
                          <el-form-item prop="itemWidth" label="寬cm" label-width="100px">
                            <el-input @input="formIn.itemWidth = formIn.itemWidth.replace(/[^\d|\.]/g, '')"
                              v-model="formIn.itemWidth" :style="{ width: '90%' }">
                            </el-input>
                          </el-form-item>
                        </el-col>
                        <el-col :span="7">
                          <el-form-item prop="itemHeight" label="高cm" label-width="100px">
                            <el-input @input="formIn.itemHeight = formIn.itemHeight.replace(/[^\d|\.]/g, '')"
                              v-model="formIn.itemHeight" :style="{ width: '90%' }">
                            </el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>

                      <!-- <el-form-item prop="stn" label="操作区域" label-width="100px">
                        <el-select v-model="formIn.stn" placeholder="请选择" :style="{ width: '80%' }">
                          <el-option
                            v-for="item in optionStn"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                          </el-option>
                        </el-select>
                      </el-form-item> -->

                      <!--<el-form-item label-width="100px">
                        <el-button
                          icon="el-icon-folder-checked"
                          size="mini"
                          style="float:left;width: 42%"
                          type="warning"
                          @click="contBack"
                        >
                          料箱放行
                        </el-button>
                         <el-button
                          type="primary"
                          icon="el-icon-folder-checked"
                          size="mini"
                          style="width: 45%"
                          @click="billInUpLocateClick"
                        >
                          物料入库登记
                        </el-button> 
                      </el-form-item>-->
                    </el-col>

                    <el-col :span="11">
                      <el-form-item prop="itemId" label="物料编号" label-width="100px">
                        <el-input v-model="formIn.itemId" disabled :style="{ width: '90%' }">
                        </el-input>
                      </el-form-item>
                      <el-form-item prop="qnty" label="入库数量" label-width="100px">
                        <el-input v-model="formIn.qnty" disabled :style="{ width: '90%' }">
                        </el-input>
                      </el-form-item>
                      <el-form-item prop="dcode" label="Date Code" label-width="100px">
                        <el-input v-model="formIn.dcode" disabled :style="{ width: '90%' }">
                        </el-input>
                      </el-form-item>

                      <el-form-item prop="lot" label="LOT" label-width="100px">
                        <el-input v-model="formIn.lot" disabled :style="{ width: '90%' }">
                        </el-input>
                      </el-form-item>

                      <el-form-item prop="supplier" label="SUPPLIER" label-width="100px">
                        <el-input v-model="formIn.supplier" disabled :style="{ width: '90%' }">
                        </el-input>
                      </el-form-item>

                    </el-col>

                  </el-row>
                </el-form>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card style="width: 97%;margin-left: 10px;">
                <el-form ref="elformDel" :model="formDel" size="mini" label-width="150px" label-position="left"
                  :rules="rules">
                  <el-form-item label="入库撤回:" style="font-size: 16px;font-weight: 700;"> </el-form-item>
                  <el-form-item prop="reelId" label="reelId" label-width="100px">
                    <el-input ref="reelDelInput" v-model="formDel.reelId1" :style="{ width: '100%' }"
                      @keyup.enter.native="stockReelAsk">
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="contLocateNo" label="货格号" label-width="100px">
                    <el-input v-model="formDel.contLocateNo" disabled :style="{ width: '100%' }">
                    </el-input>
                  </el-form-item>

                  <el-form-item label-width="100px">
                    <el-button icon="el-icon-folder-delete" size="mini" style="float:left;width: 85%" type="danger"
                      @click="stockReelDel">
                      库存删除
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-card style="width: 97%;margin-left: 10px;">
            <el-tag type="danger" style="font-weight: bold; fontSize: 20px;margin-bottom: 10px;">空间使用率{{useRate}}</el-tag>
            <el-table :data="tableData" style="width: 100%; height: 300px">
              <el-table-column prop="contNo" label="箱號" width="90%"></el-table-column>
              <el-table-column prop="createDate" label="放行時間" width="150%"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>



    </div>
  </el-card>
</template>


<script>

export default {
  name: "Indtfm",
  components: {},
  props: [],
  data() {
    return {
      useRate:"0%",
      useRateUrl:"/wms/task/saferate",
      radioZone: '1',
      //空箱登记入库
      optionsContType: [ // 下拉框的选项数据
        { value: '1', label: '其他' },
        { value: '2', label: '10格' },
        { value: '3', label: '16格' }
      ],
      optionsContVolume: [
        { value: '62.3*43*24.3', label: '62.3cm*43cm*24.3cm' },
        { value: '62.3*43.5*31.5', label: '62.3cm*43.5cm*31.5cm' },
        { value: '61.5*42.5*38', label: '61.5cm*42.5cm*38cm' }

      ],
      formCont: {
        contType: '',
        num: 1,
        stn: '',
        requestType: '0',
        contVolume: '',
      },
      contOutUrl: "/wms/task/request-out",
      selectCountUrl: "/wms/task/count",
      //空箱登记入库 END
      reelIdUrl: "/wms/task/reelid/",

      itemIdUrl: "/wms/spu/spuNo/",
      formInve: {
        billInDtNo: null,
        itemId: "",
        itemName: "",
        planInQnty: null,
        actlInQnty: null,
        disPre: true,
        disNext: true,
        showTotal: "0/0",
      },
      formIn: {
        contNo: "",
        contLocateNo: "",
        reelId1: "",
        reelId: "",
        itemId: "",
        qnty: null,
        dcode: null,
        supplier: '',
        lot: '',
        stn: '',
        requestType: '1',
        inType: '厂商交货入库',
        itemLength: '',
        itemWidth: '',
        itemHeight: '',
        stockType:''
      },
      formInveList: [],
      formQuery: {
        contNo: "",
        pageNum: 1,
        pageSize: 100,
      },
      callAGV: {
        itemId: "",
      },
      index: 0,
      rules: {
        planInQnty: [
          {
            require: true,
            pattern: /^\d*.?\d*[0-9]+\d*$|^[0-9]+\d*.d*$/,
            message: "请输入大于0的数字!",
            trigger: "change",
          },
        ],
      },

      optionsInType: [
        { value: '厂商交货入库', label: '厂商交货入库' },
        { value: '零星入库', label: '零星入库' }],
      // optionStn:[{ value: 'A区', label: 'A区' },
      // { value: 'B区', label: 'B区' }],
      contNoUrl: "/wms/container/contLocate/",
      requstInUrl: "/wms/task/request-in",

      formDel: {
        reelId: '',
        reelId1: '',
        contLocateNo: ''
      },
      //放行箱號
      tableData: [],
      intervalId: null,
      getlistForm: {
        stn: ''
      }

    };
  },
  computed: {},
  watch: {},
  created() {
    this.fetchData(); // 初始加载数据
    this.intervalId = setInterval(this.fetchData, 5000); // 每10秒刷新一次数据
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.callAgvItemID.focus();
    });
  },
  destroyed() {
    if (this.intervalId) {
      clearInterval(this.intervalId); // 清除定时器
    }
  },
  methods: {
    //刷新箱號數據
    fetchData() {
      // 这里替换成你的数据获取逻辑
      // this.tableData = [
      //   // ...获取到的数据
      // ];
      this.$http.get(
        this.useRateUrl
      ).then(({ data: res }) => {
        this.useRate  = res
      }).catch(() => {
        
      })
      
      this.getlistForm.stn = this.$store.state.user.stn
      this.$http.get(
        '/wms/task/contbacklist',
        {
          params: {

            ...this.getlistForm
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          this.tableData = []
        }
        else {
          this.tableData = res.data.list

        }

      }).catch(() => {

      })
    },

    //料箱放行
    contBack() {
      if (this.formIn.contNo == null || this.formIn.contNo == "") {

        this.$message({

          message: '箱號不能爲空',
          type: 'error',
          center: true,
          showClose: true
        })
        //this.$refs.callAgvItemID.focus();
      } else {
        //this.$confirm('確認放行料箱入庫嗎', '提示', {
        //  confirmButtonText: '確認',
        //  cancelButtonText: '取消',
        //  type: 'warning'
        //}).then(() => {
        // 用户点击了"确定"
        this.formIn.stn = this.$store.state.user.stn
        this.$http['post']('/wms/task/contback', this.formIn).then(({ data: res }) => {
          if (res.code !== 0) {
            //return this.$message.error(res.msg)
            return this.$message({
              message: res.msg,
              type: 'error',
              duration: 5000,
            })
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = true
              this.formIn.contNo = ''
              this.formIn.reelId1 = ''
              this.formIn.reelId = ''
              this.$refs.contInput.focus()
              //this.$emit('refreshDataList')
            }
          })
        }).catch(() => { })
        //}).catch(() => {
        // 用户点击了"取消"
        //console.log("操作被取消");
        //});

      }



    },
    //查询REELID信息
    reelIdAsk() {
      this.formIn.reelId = this.formIn.reelId1.replace(/^R+/, '')
      //8个8就调用料箱放行，否则是入库
      if (this.formIn.reelId == "88888888") {
        this.contBack();
      }
      else {
        this.$http.get(

          this.reelIdUrl + this.formIn.reelId
        ).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message({
              message: res.msg,
              type: 'error',
              duration: 5000,
            })
          }
          this.formIn.stockType=this.radioZone
          this.formIn.itemId = res.data.list[0].spn
          this.formIn.qnty = res.data.list[0].qty
          this.formIn.dcode = res.data.list[0].datecode
          this.formIn.supplier = res.data.list[0].supplier
          this.formIn.lot = res.data.list[0].lot

          if (this.formIn.itemId == '' || this.formIn.itemId == null) {
            return this.$message({
              message: '此reelid在ERP沒有入庫信息',
              type: 'error',
              duration: 5000,
            })
          }
          if (this.formIn.qnty > 0) {
            //長度，寬度，高度如果爲空就取以前的登記信息
            if (this.formIn.itemHeight == '' || this.formIn.itemWidth == '' || this.formIn.itemLength == '' ||
              this.formIn.itemHeight == null || this.formIn.itemWidth == null || this.formIn.itemLength == null
            ) {

              this.$http.get(this.itemIdUrl + this.formIn.itemId
              ).then(({ data: res }) => {

                if (res.data == null) {
                  return this.$message({
                    message: '請輸入長度寬度高度',
                    type: 'error',
                    duration: 5000,
                  })
                }
                else {
                  this.formIn.itemHeight = res.data.spuUnit
                  this.formIn.itemWidth = res.data.spuSpec
                  this.formIn.itemLength = res.data.spuType
                }

                //直接入库
                this.billInUpLocateClick()
              }).catch(() => { })
            }
            else {
              this.billInUpLocateClick()
            }
          }
        }).catch(() => {

        })
      }
    },

    //根据reelid查库存
    stockReelAsk() {
      this.formDel.reelId = this.formDel.reelId1.replace(/^R+/, '')

      this.$http.get(
        'wms/stock/reelid/' + this.formDel.reelId
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.formDel.contLocateNo = res.msg
      }).catch(() => {

      })
    },

    stockReelDel() {
      //刪除
      this.$http['post']('wms/stock/reelid', this.formDel).then(({ data: res }) => {
        if (res.code !== 0) {
          //return this.$message.error(res.msg)
          return this.$message({
            message: res.msg,
            type: 'error',
            duration: 5000,
          })
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.visible = true
            //this.$emit('refreshDataList')
            this.formDel.reelId1 = ''
            this.formDel.reelId = ''
            this.formDel.contLocateNo = ''
            this.$refs.reelDelInput.focus()
          }
        })
      }).catch(() => { })
    },
    //查询料箱空货格号
    contLocateAsk() {
      this.$http.get(
        this.contNoUrl + this.formIn.contNo
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.formIn.contLocateNo = res.msg
        this.$refs.reelInput.focus()
      }).catch(() => {

      })

    },


    //请求料箱出库
    requestContOut() {

      this.formCont.stn = this.$store.state.user.stn
      if (this.formCont.contType == null || this.formCont.contType == '') {
        this.$message({

          message: '料箱類型不能为空',
          type: 'error',
          center: true,
          showClose: true
        })
        //this.$refs.callAgvItemID.focus();
      }
      if (this.formCont.contVolume == null || this.formCont.contVolume == '') {
        this.$message({

          message: '料箱體積不能为空',
          type: 'error',
          center: true,
          showClose: true
        })
        //this.$refs.callAgvItemID.focus();
      }
      else if (this.formCont.stn == null || this.formCont.stn == '') {
        this.$message({

          message: '操作区域不能为空',
          type: 'error',
          center: true,
          showClose: true
        })
        //this.$refs.callAgvItemID.focus();
      }
      else {

        this.$http.get(
          this.selectCountUrl,
          {
            params: {
              ...this.formCont
            }
          }
        ).then(({ data: res }) => {
          if (res > 0) {
            this.$confirm('途中已經有' + res + '個空料箱在出庫,確認繼續請求嗎', '提示', {
              confirmButtonText: '確認',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$http['post'](this.contOutUrl, this.formCont).then(({ data: res }) => {
                if (res.code !== 0) {
                  //return this.$message.error(res.msg)
                  return this.$message({
                    message: res.msg,
                    type: 'error',
                    duration: 5000,
                  })
                }
                this.$message({
                  message: this.$t('prompt.success'),
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.visible = false
                    this.formCont.num = 1
                    //this.$emit('refreshDataList')
                  }
                })
              }).catch(() => { })

            }).catch(() => {
              // 用户点击了"取消"
              //console.log("操作被取消");
            });
          }
          else {
            this.$http['post'](this.contOutUrl, this.formCont).then(({ data: res }) => {
              if (res.code !== 0) {
                //return this.$message.error(res.msg)
                return this.$message({
                  message: res.msg,
                  type: 'error',
                  duration: 5000,
                })
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 1000,
                onClose: () => {
                  this.visible = false
                  this.formCont.num = 1
                  //this.$emit('refreshDataList')
                }
              })
            }).catch(() => { })
          }
        }).catch(() => {
        })
      }
    },

    //确认（补货上架确认）
    billInUpLocateClick() {
      this.formIn.stn = this.$store.state.user.stn
      //this.formIn.reelId = this.formIn.reelId1.replace(/^R+/, '')
      if (this.formIn.qnty == null || this.formIn.qnty == 0) {
        this.$message({
          message: '数量要大于0',
          type: 'error',
          center: true,
          showClose: true
        })
        //this.$refs.callAgvItemID.focus();
      } else {
        this.$http['post'](this.requstInUrl, this.formIn).then(({ data: res }) => {
          if (res.code !== 0) {
            //return this.$message.error(res.msg, {
            //    duration: 50000 // 设置显示时长为5秒
            //  })
            return this.$message({
              message: res.msg,
              type: 'error',
              duration: 5000,
            })
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = true
              //this.$emit('refreshDataList')
              this.formIn.itemId = ''
              this.formIn.qnty = null
              this.formIn.dcode = null
              this.formIn.supplier = ''
              this.formIn.lot = ''
              this.formIn.contLocateNo = ''
              this.formIn.reelId1 = ''
              this.formIn.reelId = ''
              this.formIn.itemHeight = ''
              this.formIn.itemWidth = ''
              this.formIn.itemLength = ''
              this.contLocateAsk()
            }
          })
        }).catch(() => { })
      }
    },

  },
};
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}

.el-radio-group {
  padding-left: 20px;
}

.card-container {
  flex-direction: column;
}

.el-form-item ::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
</style>